<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的按钮组</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style> 

    
    /* css注释：为了观察效果设置宽度 边框 高度等样式 */ 
    td {
      text-align:center; /*设置水平居中*/
      vertical-align:middle;/*设置垂直居中*/
    }
    h1{
        text-align:center; /*设置水平居中*/
      vertical-align:middle;/*设置垂直居中*/
	}
	table{
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	}
	.nav {
    background: #009c39;
    padding: 10px 0 6px 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}
.nav ul {
    height: 0px;
}
.nav ul li {
    float: left;
    width: 25%;
    text-align: center;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.nav ul li span {
    display: block;
    color: #fff;
    font-size: 14px;
    font-family: "微软雅黑";
    line-height: 22px;
}
a {
    color: #000;
    text-decoration: none;
}
* {
    padding: 0;
    margin: 0;
    list-style: none;
    font-weight: normal;
}

    </style>
</head>
<body data-spy="scroll" data.target="#myScrollspy">
<script language="JavaScript">

    function subNum(){

        if(document.getElementById("num"+event.srcElement.value).value!="0")
		{
    document.getElementById("num"+event.srcElement.value).value=document.getElementById("num"+event.srcElement.value).value-1;
	
		}
	}
    

    function addNum(){
    document.getElementById("num"+event.srcElement.value).value=document.getElementById("num"+event.srcElement.value).value--+1;

    }

</script>


<div class="container">
    <h1>订餐系统</h1>
    <div class="row">
		
        <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12" id="myScrollspy">
			<div class="btn-group btn-group-justified " data-toggle="buttons"  >
				<label class="btn btn-default active">
					<input type="radio" name="options" id="option1"  > 11月24日
				</label>
				<label class="btn btn-default">
					<input type="radio" name="options" id="option2"> 11月25日
				</label>
				<label class="btn btn-default">
					<input type="radio" name="options" id="option3"> 11月26日
				</label>
			</div>
        </div>
		
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  >
			<div class="btn-group btn-group-justified btn-group-sm " data-toggle="buttons" style="margin-top:10px ;margin-bottom:10px">
				<label class="btn btn-default active">
					<input type="radio" name="options" id="option1" > 早餐
				</label>
				<label class="btn btn-default">
					<input type="radio" name="options" id="option2"> 中餐
				</label>
				<label class="btn btn-default">
					<input type="radio" name="options" id="option3"> 晚餐
				</label>
				<label class="btn btn-default">
					<input type="radio" name="options" id="option4"> 夜宵
				</label>
			</div>
        </div>
		
		<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" >
			<div class="panel-group " id="accordion">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a data-toggle="collapse" data-parent="#accordion" 
							href="#collapseOne">
								肉类
							</a>
						</h4>
					</div>
					<div id="collapseOne" class="panel-collapse collapse in">
						<div class="panel-body">
						<a href="#meat" class="list-group-item">鱼肉</a>
						<a href="#" class="list-group-item">猪肉</a>
						<a href="#" class="list-group-item">牛肉</a>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a data-toggle="collapse" data-parent="#accordion" 
							href="#collapseTwo">
								蔬菜类
							</a>
						</h4>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse">
						<div class="panel-body">
							<a href="#" class="list-group-item">花菜</a>
							<a href="#" class="list-group-item">包菜</a>
							<a href="#" class="list-group-item">芹菜</a>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a data-toggle="collapse" data-parent="#accordion" 
							href="#collapseThree">
								饮料
							</a>
						</h4>
					</div>
					<div id="collapseThree" class="panel-collapse collapse">
						<div class="panel-body">
							<a href="#" class="list-group-item">汽水</a>
						<a href="#" class="list-group-item">果汁</a>
						<a href="#" class="list-group-item">矿泉水</a>
						</div>
					</div>
				</div>
			</div>
		</div>	
		<div class="table-responsive col-xs-10 col-sm-10 col-md-10 col-lg-10 " >
			<table class="table ">
							
				<tbody>
						
				<tr>
					
					<td ><p id="meat">水煮鱼</p></td>
					<td><img src="123.jpg"  alt="上海鲜花港 - 郁金香"  height="100" width="100" class="img-rounded "/></td>
					<td>
						<label id="numac" name="15">15元 </label>
						
					</td>
					<td style="text-align:center;vertical-align:middle;">
						
						<form class="form-inline" role="form">
						<div class="form-group ">

							<button value="a" type="button" class="btn btn-default  "  onclick="subNum();" >-</button>
							<input id="numa" type="text" class="form-control " placeholder="0" value="0" readOnly="true" style="width:60px;">
							<button value="a" type="button" class="btn btn-default "  onclick="addNum();" >+</button>
						</div>

					</form></td>
					
					
					
				</tr>
				<tr>
					
					<td ><p>水煮鱼打法是</p></td>
					<td><img src="123.jpg"  alt="上海鲜花港 - 郁金香"  height="100" width="100" class="img-rounded "/></td>
					<td>
						<label id="numbc" value="16">16元 </label>
					</td>
					<td >
						
						<form class="form-inline" role="form">
						<div class="form-group  ">

							<button value="b" type="button" class="btn btn-default  "  onclick="subNum();" >-</button>
							<input id="numb" type="text" class="form-control " placeholder="0" value="0" readOnly="true" style="width:60px;" >
							<button value="b" type="button" class="btn btn-default "  onclick="addNum();" >+</button>
						</div>
					</form></td>
					
					
				</tr>
				
				
				
				</tbody>
			</table>
			
		</div>
		
			<div class="nav">
            <ul>
                <li>
                    <a href="#"><span><img src="images/ni4.jpg" height="20"></span><span>充值卡</span></a>
                </li>
                <li style="position:relative;">
                    <a href="#"><span><img src="images/ni3.jpg" height="20"></span><span>购买记录</span></a>
                </li>
                <li>
                    <a href="#"><span><img src="images/ni2.jpg" height="20"></span><span>我的篮子</span></a>
                </li>
                <li>
                    <a href="#"><span><img src="images/ni5.jpg" height="20"></span><span>个人中心</span></a>
                </li>
            </ul>
        </div>
		



					
					
						
					



        
    </div>
</div>


</body>
</html>